﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table.slimTable
        {
            font-family: Arial, Helvetica, sans-serif;
            margin-top: 10px;
            border-collapse: collapse;
            border: 1px solid #888;
            width: 100%;
        }
        
        table.slimTable pre
        {
            width: auto;
            margin: 0;
            padding: 0;
            border: 0;
            background-color: transparent;
        }
        
        table.slimTable th
        {
            vertical-align: baseline;
            padding: 5px 15px 5px 5px;
            background-color: #ccc;
            border: 1px solid #888;
            text-align: left;
        }
        
        table.slimTable td
        {
            vertical-align: text-top;
            padding: 5px 15px 5px 5px;
            background-color: #efefef;
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    <p>
        下表是对这些选择器的简单总结：</p>
    <table class="slimTable">
        <tr>
            <th>
                类型
            </th>
            <th>
                描述
            </th>
        </tr>
        <tr>
            <td>
                [abc^=&quot;def&quot;]
            </td>
            <td>
                选择 abc 属性值以 &quot;def&quot; 开头的所有元素
            </td>
        </tr>
        <tr>
            <td>
                [abc$=&quot;def&quot;]
            </td>
            <td>
                选择 abc 属性值以 &quot;def&quot; 结尾的所有元素
            </td>
        </tr>
        <tr>
            <td>
                [abc*=&quot;def&quot;]
            </td>
            <td>
                选择 abc 属性值中包含子串 &quot;def&quot; 的所有元素（单词的一部分为&quot;def&quot;即可）
            </td>
        </tr>
        <tr>
            <td>
                [abc~=&quot;def&quot;]
            </td>
            <td>
                选择 abc 属性值中包含完整子单词 &quot;def&quot; 的所有元素（必须是一个完整的单词&quot;def&quot;）
            </td>
        </tr>
    </table>
    <p>
        尤其是最后两条的使用略有不同</p>
    <fieldset>
        <legend>使用~匹配属性的值中的一个独立单词</legend>
        <style type="text/css">
            [title~=hello]  {  color: red; }
        </style>
        <h2>
            可以应用样式：</h2>
        <p title="student hello">
            student hello!</p>
        <h2>
            无法应用样式：</h2>
        <p title="hello2 world">
            Hello2 world</p>
    </fieldset>
    <fieldset>
        <legend>使用*匹配属性的值中任意的一个子串</legend>
        <style type="text/css">
            [title*=qing]  { color: red; }
        </style>
        <h2>
            可以应用样式：</h2>
        <p title="qingdao">
            qingdao</p>
        <p title="qing dao">
            qing dao</p>
    </fieldset>
</body>
</html>
